import { defineComponent, ref, onMounted, computed } from 'vue';
import './index.module.scss';
import '../../Rectangle/index.css'
import Rectangle from '../../Rectangle'
export default defineComponent({
  name: 'PaintTool',
  props: {
    state: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props, { emit }) {
    // 截图状态
    const rect = ref(null)
    // 截图功能
    const handleScreenshot = (status) => {
      switch (status) {
        case 'startClip':
          // rect.value.set('rect.border.color', '#FFAE0D')
          rect.value.startClip()
          break;
        case 'saveClip':
          rect.value.getClip();
          break;
        case 'closeClip':
          rect.value.closeClip();
          break;
      }
    };
    // 其他工具功能
    const tools = [
      [
        { name: 'brush', icon: 'el-icon-brush', label: '画笔', disabled: true },
        { name: 'text', icon: 'el-icon-edit', label: '文字', disabled: true },
        { name: 'shape', icon: 'el-icon-crop', label: '形状', disabled: true },
        { name: 'undo', icon: 'el-icon-refresh-left', label: '撤销', disabled: true },
        { name: 'redo', icon: 'el-icon-refresh-right', label: '重做', disabled: true }
      ],
      [
        { name: 'lastFrame', icon: 'el-icon-arrow-left', label: '上一帧' },
        { name: 'nextFrame', icon: 'el-icon-arrow-right', label: '下一帧' }
      ]
    ];
    const canClip = computed(() => {
      return !props.state.isPlaying;
    })
    const handleToolClick = (toolName: string) => {
      emit('operateHandler', toolName)
    };
    onMounted(() => {
      rect.value = new Rectangle('#paintArea', {
        rect: {
          border: {
            width: 1
          }
        },
        dot: {
          width: 4
        },
        events: {
          contextmenu: {
            disabled: true
          },
          draggable: {
            disabled: false
          },
          clip: {
            disabled: false
          }
        }
      })
      rect.value.on('dragend', e => {
        emit('operateHandler', 'dragend', e);
      })
    });

  return () => (
      <div class={['toolbar-container']}>
        <div class='toolbar-row screenshot-tools'>
          {(
            <fragment>
              <el-divider direction='vertical' />
              <el-tooltip content='开始截图' placement='bottom'>
                <el-button
                  icon='el-icon-camera'
                  disabled={!canClip.value}
                  onClick={() => handleScreenshot('startClip')}
                />
              </el-tooltip>
              <el-tooltip content='保存截图' placement='bottom'>
                <el-button
                  icon='el-icon-download'
                  disabled={!canClip.value}
                  onClick={() => handleScreenshot('getClip')}
                />
              </el-tooltip>
              <el-tooltip content='取消截图' placement='bottom'>
                <el-button
                  icon='el-icon-close'
                  disabled={!canClip.value}
                  onClick={() => handleScreenshot('closeClip')}
                />
              </el-tooltip>
            </fragment>
          )}
        </div>
        {
          tools.map(item => {
            return <div class='toolbar-row other-tools'>
              {
                item.map(tool => (
                  <el-tooltip key={tool.name} content={tool.label} placement='bottom'>
                    <el-button
                      icon={tool.icon}
                      onClick={() => handleToolClick(tool.name)}
                      disabled={tool.disabled}
                      class='tool-button'
                    >
                      {tool.label}
                    </el-button>
                  </el-tooltip>
                ))
              }
            </div>
          })
        }
      </div>
    )
  }
});
